{% extends "siteSetting/set_base.html" %}
{% block title %}轮播图{% endblock %}
{% block head %}
{{ super() }}
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/sortable.min.css') }}">

{% endblock %}

{% block page_content %}
<h1 class="page-header">轮播图</h1>

<div class="">

    <div id="pc" style=""  class="col-md-6">
    <h3>pc端</h3>
    <div>
    <button id="id-button-pc-save-sort" class="btn btn-primary">保存</button>
    <!-- <button id="id-button-pc-save-url" class="btn btn-primary">保存URL</button> -->
    <button id="id-button-pc-delete" class="btn btn-danger" type="button">删除</button>
        <table class="uk-table uk-table-hover">
            <thead>
            <tr class="">
                <th></th>   
                <th>#</th>
                <th>轮播图</th>
                <th>URL</th>
            </tr>
            </thead>

            <tbody class="my-sortable uk-sortable" data-uk-sortable>

                            
            {% for c in cs%}
            <tr>
                <td><input type="checkbox" name="delete" class="input-pc-delete"></td>
                <td class="td-sort-pc-id">{{ c.id }}</td>
                <input type="hidden" class="input-sort-pc-id" name="input-sort-id" value="{{ c.id }}">
                <td>
                    <figure class="uk-overlay uk-overlay-hover">
                        <img src="{{ c.path }}" width="220" height="80">
                        <div class="uk-overlay-panel uk-overlay-fade uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center">
                            <h2>点击更换图片</h2><br>
                        </div>
                        <a class="a-pc-input-file uk-position-cover"></a>
                        
                    </figure>
                </td>
                <td>
                    <input class="input-pc-url form-control" value="{% if c.url %}{{ c.url }}{% else %}{% endif %}">
                </td>
            </tr>
            {% endfor %}
            
            

            </tbody>

        </table>
    <form action="/setting/carousel/upload?type=pc" method="post" id="form-pc-upload-one"
                          enctype="multipart/form-data" class="form-upload" style="display:none;">
        <input class="input-pc-sort" name="input-sort-id" value="">
        <input class="input-file" type="file" name="file" accept="image/*">
        <button class="button-file"></button>
    </form>
    </div>
    </div>




    <div id="app" style=""  class="col-md-6">
        <h3>app端</h3>
        <div>
            <button id="id-button-app-save-sort" class="btn btn-primary">保存</button>
            <!-- <button id="id-button-app-save-url" class="btn btn-primary">保存URL</button> -->
            <button id="id-button-app-delete" class="btn btn-danger">删除</button>
            <table class="uk-table uk-table-hover">
                <thead>
                <tr class="">
                    <th></th>
                    <th>#</th>
                    <th>轮播图</th>
                    <th>URL</th>
                </tr>
                </thead>

                <tbody class="my-sortable uk-sortable" data-uk-sortable>

                                
                {% for c in cas%}
                <tr>
                    <td><input type="checkbox" name="delete" class="input-app-delete"></td>
                    <td class="td-sort-app-id">{{ c.id }}</td>
                    <input type="hidden" class="input-sort-app-id" name="input-sort-id" value="{{ c.id }}">
                    <td>
                        <figure class="uk-overlay uk-overlay-hover">
                            <img src="{{ c.path }}" width="220" height="80">
                            <div class="uk-overlay-panel uk-overlay-fade uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center">
                                <h2>点击更换图片</h2><br>
                            </div>
                            <a class="a-app-input-file uk-position-cover"></a>
                            
                        </figure>
                    </td>
                    <td>
                        <input class="input-app-url form-control" value="{% if c.url %}{{ c.url }}{% else %}{% endif %}">
                    </td>
                </tr>
                {% endfor %}
                
                

                </tbody>

            </table>
        <form action="/setting/carousel/upload?type=app" method="post" id="form-app-upload-one"
                              enctype="multipart/form-data" class="form-upload" style="display:none;">
            <input class="input-app-sort" name="input-sort-id" value="">
            <input class="input-file" type="file" name="file" accept="image/*">
            <button class="button-file"></button>
        </form>
        </div>
    </div>


</div>


{% endblock %}

{% block scripts  %}
{{ super() }}

<script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/sortable.min.js') }}"></script>

<script>
    var ajaxPost = function (url, method, form, success, error) {
        var request = {
            url: url,
            type: method,
            contentType: 'application/json',
            success: function (r) {
                success(r);
            },
            error: function (err) {
                r = {
                    success: false,
                    data: err
                };
                error(r);
            }
        };
        if (method === 'post') {
            var data = JSON.stringify(form);
            request.data = data;
        }
        $.ajax(request);
    };
    var success = function (r) {
        console.log(r.message);
    };
    var error = function (err) {
            
    };  


    var fillSortId = function () {  {# 拖动结束后把序号按从小到大改写 #}
        $.each($(".td-sort-pc-id"), function (e) {
            $(this).html(e + 1);

        });
        $.each($(".td-sort-app-id"), function (e) {
            $(this).html(e + 1);

        });
    };


    var sendSortId = function (sort_jquery,input_url_class,url) {  {# 把ID和URL按顺序打包成列表发送 #}
        var sort_id = [];
        var method = 'post';

        $.each(sort_jquery, function () {
            d = {}
            id = $(this).val()
            var u = $(this).closest('tr').find(input_url_class).val()
            d['id'] = id;
            d['url'] = u;
            sort_id.push(d);
        });
        ajaxPost(url, method, sort_id, success, error);
    }
    var sendDelete = function (input_delete_jquery, url) {
        var form = {};
        var method='post';
        $.each(input_delete_jquery, function () {
            if ($(this).is(':checked')) {
                var input_id = $(this).closest('tr').find('input[name="input-sort-id"]');
                var id = input_id.val();
                form[id] = true;
            };
        });
        var success = function (r) {
            alert(r.message);
            window.location.reload();
        }        
        ajaxPost(url, method, form, success, error);

    }

    var bindActions = function () {
        // bindForm();

        $.each($(".a-pc-input-file"), function () {
            $(this).on('click', function (event) {
                var form = $("#form-pc-upload-one");
                var i = $(this).closest('tr').find('.input-sort-pc-id');
                form.children('input.input-pc-sort').val($(i).val());
                form.children('input.input-file').click();
            })
        });

        $.each($(".a-app-input-file"), function () {
            $(this).on('click', function (event) {
                var form = $("#form-app-upload-one");
                var i = $(this).closest('tr').find('.input-sort-app-id');
                form.children('input.input-app-sort').val($(i).val());
                form.children('input.input-file').click();
            })
        });

        $.each($("input.input-file"), function() {
            $(this).on('change', function (event) {
                var self = $(event.target);
                var button = self.next();
                button.click();

            })
        })
        
        $("#id-button-pc-save-sort").on('click', function () {
            var sort_jquery = $(".input-sort-pc-id");
            var url = '/setting/carousel/save/pc';
            var cla = 'input.input-pc-url';
            sendSortId(sort_jquery,cla,url);
            setTimeout("window.location.reload();", 500);
        });
        $("#id-button-app-save-sort").on('click', function () {
            var sort_jquery = $(".input-sort-app-id");
            var url = '/setting/carousel/save/app';
            var cla = 'input.input-app-url';
            sendSortId(sort_jquery,cla,url);
            setTimeout("window.location.reload();", 500);
        });        
        $("#id-button-pc-delete").on('click', function () {
            var url='/setting/carousel/delete/pc';
            var input_delete_jquery = $(".input-pc-delete");
            sendDelete(input_delete_jquery, url);
        });
        $("#id-button-app-delete").on('click', function () {
            var url='/setting/carousel/delete/app';
            var input_delete_jquery = $(".input-app-delete");
            sendDelete(input_delete_jquery, url);
        });        
        $(".my-sortable").on('stop.uk.sortable', function() {
            fillSortId();
        });

    };

    var setup = function () {
        fillSortId();
    }


    $(document).ready(function () {
        setup();
        bindActions();
    });

</script>
<script>
    nav = document.getElementById("nav_carousel");
    nav.setAttribute("class", "active");
</script>
{% endblock %}